<template>
	<div class="page">
		<image class="drawBanner" :src="drawSrc"></image>
		<div class="buttonWrap">
			<u-button type="success" shape="circle" open-type="getPhoneNumber" @getphonenumber="weChatLogin">微信用户一键登录
			</u-button>
			<p class="accouintlogin" @click="$u.route('/pagesB/login/login')">手机号码登录/注册</p>
		</div>
		<u-toast ref="uToast" />
	</div>
</template>

<script>
	export default {
		data() {
			return {
				userinfo: {},
				drawSrc: '',
				wecode: '',
				inviterID: ''
			}
		},
		onLoad(option) {
			this.userinfo = option
			this.drawSrc = this.STATICURL + 'images/wechatLogin@2x.png'
			// 1、千万记住在getphone之后不能login，否则session_key就会失效
			// 在onload直接登录获取code,拿着这个code去后台获取session_key
			uni.login({
				provider: "weixin",
				success: loginRes => {
					this.wecode = loginRes.code

				},
				fail: (err) => {
					this.$toast(JSON.stringify(err));
				},
			});
		},
		methods: {
			// 微信小程序登录   code换区 小程序openid 和 session_key
			getOpenID() {
				return new Promise(resolve => {
					this.$http.getWechatMiniProgramOpenid({
						code: this.wecode
					}).then(res => {
						resolve(res.data)
					});
				})
			},

			async weChatLogin(e) {
				/**
				 * @file: my.vue
				 * @function  weChatLogin
				 * @filepath pages/tabBar/my.vue
				 * @param {type} phone - 用户手机号
				 * @description: 微信小程序登录串行事件
				 * 第一步：获取微信绑定的手机号
				 * 第二步：生成code向后端换取openid
				 * 第三步：获取用户信息以及分销商信息
				 * 第四步:  执行登录-上传以上相关信息参数
				 * @author: jayson
				 * @date: 18:05
				 */
				//  uni.getUserProfile({
				// 	desc:'获取用户基础信息',
				// 	lang:'zh_CN',
				// 	success: function (infoRes) {
				// 		console.log('1')
				// 		uni.showToast({
				// 			title:'123'
				// 		})
				// 		this.userinfo= infoRes.userInfo;
				// 		console.log(this.userinfo)
				// 	}
				// })
				// userinfo：小程序授权获取微信用户信息
				const getOpenIDResult = await this.getOpenID() //根据微信密钥code换取   getOpenIDResult:  openid session_key
				const userphone = await this.getPhoneNumber(e, getOpenIDResult.session_key)
				uni.setStorageSync('xcxOpenid', getOpenIDResult.open_id) //存取小程序openid
				this.asyncUerInfo(getOpenIDResult.open_id, userphone.phone)

			},
			//获取微信手机号
			getPhoneNumber(e = {}, key = "") {

				const params = {
					encryptedData: e.detail.encryptedData,
					iv: e.detail.iv,
					sessionKey: key,
					code:this.wecode
				};
				return new Promise((resolve, reject) => {
					this.$http.getPhoneNumber(params).then(res => {
						if (res.status === 200) {
							resolve(res.data);
						} else {
							reject(res.mess)
						}
					});
				});
			},

			asyncUerInfo(openid = '', phone) {
				/**
				 * @file: miniProgramLogin.js
				 * @function  asyncUerInfo
				 * @filepath utils/miniProgramLogin.js
				 * @param {Object} res - 用户信息
				 * @return {String} openid - 小程序用户openid
				 * @description:
				 * @author: jayson
				 * @date: 18:34
				 */

				const {
					nickName,
					gender,
					avatarUrl,
					inviterID
				} = this.userinfo
				this.$http.getsfdenglu({
					oauth: 'weixin',
					openid: openid,
					nick_name: nickName,
					uniongender: gender,
					iconurl: avatarUrl,
					phone,
					inviter: inviterID
				}).then(dengluRes => {
					if (dengluRes.status == 200) {
						this.$store.commit('loginStatus', true)
						uni.setStorageSync('token', dengluRes.data.token);
						uni.setStorageSync('identity', dengluRes.data.identity);
						uni.setStorageSync('role', dengluRes.data.role);
						uni.setStorageSync('role_id', dengluRes.data.shop_id);
						this.im()
						this.$refs.uToast.show({
							title: '登录成功',
							type: 'success',
							duration: 500,
							isTab: 'true',
							url: '/pages/tabBar/my'
						})

					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {}

	.page {
		background-color: #fff;
		height: 100vh;
		padding: 60upx 30upx;
		text-align: center;
	}

	.drawBanner {
		width: 85vw;
		height: 351rpx;

	}

	.buttonWrap {
		margin: 40upx;

		.accouintlogin {
			color: #444;
			margin-top: 20upx
		}
	}
</style>
